<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="100px">
      <el-form-item label="MAC地址:" prop="jobName">
        <el-input v-model="queryParams.devid" placeholder="请输入网关MAC地址" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="在线状态" prop="jobGroup">
        <el-select v-model="queryParams.onlineStatus" placeholder="在线状态" clearable>
          <el-option label="在线" value="1"></el-option>
          <el-option label="离线" value="0"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="所在区域:" prop="jobName">
        <el-select v-model="queryParams.areaId" placeholder="请选择设备所在区域" clearable :style="{ width: '100%' }" filterable>
          <el-option v-for="(item, index) in areaInfoList" :key="index" :label="item.menuName"
            :value="item.menuId"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetForm">重置</el-button>
      </el-form-item>
    </el-form>
    <el-row>
      <el-table v-loading="loading" :data="logList">
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="设备mac地址" width="140" align="center" prop="deviceId" />
        <el-table-column prop="devName" label="设备别名" width="120" align="center">
        </el-table-column>
        <el-table-column prop="onlineStatus" label="在线状态" width="120" align="center">
          <template slot-scope="scope">
            <el-tag type="success" v-if="scope.row.onlineStatus == 1">在线</el-tag>
            <el-tag v-if="scope.row.workStatus == 1 && scope.row.onlineStatus == 1">工作</el-tag>
            <el-tag type="info" v-if="scope.row.onlineStatus == 0">离线</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="typeName" label="设备类型" width="120" align="center">
        </el-table-column>
        <el-table-column prop="devModelTypeName" label="设备型号" width="120" align="center">
        </el-table-column>
        <el-table-column prop="addTime" label="添加时间" width="120" :formatter="parseTime" align="center"
          :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column prop="actTime" label="激活时间" width="120" align="center" :formatter="parseTime1"
          :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column prop="routerMac" label="连接路由器" width="120" align="center" :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column prop="devVersion" label="版本信息" width="120" align="center" :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column prop="remark" label="备注" width="120" align="center" :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column prop="sectionName" label="归属公司" width="120" align="center">
        </el-table-column>
        <el-table-column prop="customerName" label="归属人" width="120" align="center">
        </el-table-column>
        <el-table-column prop="areaName" label="归属区域" width="120" align="center">
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="200" align="center">
          <template slot-scope="scope">
            <el-button size="mini" type="text" icon="el-icon-edit" @click="openUploadDig(scope.row)">查看采集数据</el-button>
            <el-dropdown size="mini" @command="(command) => handleCommand(command, scope.row)">
<!--              v-hasPermi="['monitor:job:changeStatus', 'monitor:job:query']">  -->
              <el-button size="mini" type="text" icon="el-icon-d-arrow-right">更多</el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="settingGWFilter" icon="el-icon-s-tools">设置采集数据条件</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
        @pagination="getList" />
    </el-row>


    <!-- 网关数据弹出层 -->
    <el-dialog title="插座上报数据" :visible.sync="showGwUploadDig" width="1000px" height="600px" append-to-body>
      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button type="info" plain icon="el-icon-refresh-right" size="mini" @click="getGwUploadList"
            v-hasPermi="['monitor:job:query']">刷新</el-button>
        </el-col>
      </el-row>
      <el-table v-loading="Uploadloading" :data="uploadList">
        <el-table-column prop="devId" label="设备Mac地址" width="120" align="center">
        </el-table-column>
        <el-table-column prop="voltage" label="工作状态" width="120" align="center">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.workStatus == 1">工作</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="voltage" label="电压" width="120" align="center">
        </el-table-column>
        <el-table-column prop="relayStatus" label="继电器" width="120" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.relayStatus == 1">开</span>
            <span v-else-if="scope.row.relayStatus == 0">关</span>
          </template>
        </el-table-column>
        <el-table-column prop="electricCurrent" label="电流" width="120" align="center">
        </el-table-column>
        <el-table-column prop="powerFactor" label="频率" width="120" align="center">
        </el-table-column>
        <el-table-column prop="activePower" label="功率" width="120" align="center">
        </el-table-column>
        <el-table-column prop="updateTime" label="更新时间" width="160" :formatter="parseTime" align="center"
          :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="150" align="center">
          <template slot-scope="scope">
            <el-button size="mini" type="text" icon="el-icon-thumb"
              @click="openJdqControls(scope.row)">继电器操作</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="gwUptotal > 0" :total="gwUptotal" :page.sync="showGwUpload.pageNum"
        :limit.sync="showGwUpload.pageSize" @pagination="getGwUploadList" />
      <div slot="footer" class="dialog-footer">
        <el-button @click="showGwUploadDig = false">关 闭</el-button>
      </div>
    </el-dialog>
    <!-- 控制继电器模块 -->
    <el-dialog title="继电器操作" width="30%" :visible.sync="showGwUploaControldDig">
      <el-form label-width="100px">
        <el-form-item label="设备编号">
          <el-input type="text" v-model="showGwUploaControldParams.devMac" disabled></el-input>
        </el-form-item>
        <el-form-item label="发送指令">
          <el-select v-model="showGwUploaControldParams.controld">
            <el-option label="打开继电器" value="1"></el-option>
            <el-option label="关闭继电器" value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="线路选择">
          <el-select multiple v-model="showGwUploaControldParams.lineIdList">
            <el-option label="第一路" value="1"></el-option>
            <el-option label="第二路" value="2"></el-option>
            <el-option label="第三路" value="3"></el-option>
            <el-option label="第四路" value="4"></el-option>
          </el-select>
          <el-tooltip effect="dark" content="被控制有几路则选择几路，不需要过多选取" style="margin-left: 10px;" placement="bottom">
            <i class='el-icon-question' />
          </el-tooltip>
        </el-form-item>
      </el-form>
      <div class="dialog-footer" slot="footer">
        <el-button @click="showGwUploaControldDig = false">取消</el-button>
        <el-button @click="sendGwUploaControldParams()">发送</el-button>
      </div>
    </el-dialog>
    <!-- 配置过滤条件模块 -->

    <el-dialog title="配置过滤条件" width="40%" :visible.sync="settingGWFilterDig">
      <el-form label-width="150px">
        <el-form-item label="设备编号">
          <el-input type="text" style="width: 280px;" v-model="settingGWFilterDigParams.deviceId" disabled></el-input>
        </el-form-item>
        <el-form-item label="采集蓝牙设备名称">
          <el-input type="text" style="width: 280px;" v-model="settingGWFilterDigParams.nameParams"></el-input>
          <el-tooltip effect="dark" content="设置名称前缀，以逗号分隔 例如AABB,BBCC...." style="margin-left: 10px;"
            placement="bottom">
            <i class='el-icon-question' />
          </el-tooltip>
        </el-form-item>
        <el-form-item label="名称-CutNum">
          <el-input type="text" style="width: 280px;" v-model="settingGWFilterDigParams.nameCutNum" placeholder="输入 00 就行"></el-input>
          <el-tooltip effect="dark" content="默认填写00" style="margin-left: 10px;" placement="bottom">
            <i class='el-icon-question' />
          </el-tooltip>
        </el-form-item>
        <el-form-item label="(名称)下发设备类型">
          <el-input type="text" style="width: 280px;" v-model="settingGWFilterDigParams.nameType" placeholder="16进制"></el-input>
          <el-tooltip effect="dark" content="填写的类型是什么，网关就会以该类型采集数据上传。不必在意" style="margin-left: 10px;"
            placement="bottom">
            <i class='el-icon-question' />
          </el-tooltip>
        </el-form-item>
        <el-form-item label="采集方式(名称)">
          <el-radio-group v-model="settingGWFilterDigParams.nameFilterWay">
            <el-radio plain :label="0">广播数据</el-radio>
            <el-radio plain :label="1">响应数据</el-radio>
            <el-radio plain :label="2">广播及响应数据</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="采集蓝牙Mac地址">
          <el-input type="text" style="width: 280px;" v-model="settingGWFilterDigParams.macParams"></el-input>
          <el-tooltip effect="dark" content="设置Mac前缀，以逗号分隔 例如AABB,BBCC...." style="margin-left: 10px;"
            placement="bottom">
            <i class='el-icon-question' />
          </el-tooltip>
        </el-form-item>
        <el-form-item label="Mac-CutNum">
          <el-input type="text" style="width: 280px;" v-model="settingGWFilterDigParams.macCutNum" placeholder="输入 00 就行"></el-input>
        </el-form-item>
        <el-form-item label="(Mac)下发设备类型">
          <el-input type="text" style="width: 280px;" v-model="settingGWFilterDigParams.macType" placeholder="16进制"></el-input>
        </el-form-item>
        <el-form-item label="采集方式(Mac)">
          <el-radio-group v-model="settingGWFilterDigParams.macFilterWay">
            <el-radio plain :label="0">广播数据</el-radio>
            <el-radio plain :label="1">响应数据</el-radio>
            <el-radio plain :label="2">广播及响应数据</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="采集的公司id">
          <el-input type="text" style="width: 280px;" v-model="settingGWFilterDigParams.companyParams" placeholder="请输入16进制的公司id"></el-input>
        </el-form-item>
        <el-form-item label="公司CutNum">
          <el-input type="text" style="width: 280px;" v-model="settingGWFilterDigParams.companyCutNum" placeholder="需要输入，没有则输入 0"></el-input>
        </el-form-item>
        <el-form-item label="公司下发设备类型">
          <el-input type="text" style="width: 280px;" v-model="settingGWFilterDigParams.companyType" placeholder="16进制"></el-input>
        </el-form-item>
        <el-form-item label="采集方式(公司id)">
          <el-radio-group v-model="settingGWFilterDigParams.companyFilterWay">
            <el-radio plain :label="0">广播数据</el-radio>
            <el-radio plain :label="1">响应数据</el-radio>
            <el-radio plain :label="2">广播及响应数据</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div class="dialog-footer" slot="footer">
        <el-button @click="settingGWFilterDig = false">取消</el-button>
        <el-tooltip content="发送后本页面的`查看采集数据`中的数据将会被清除。">
          <el-button @click="sendsetShowGWfilterDig()">发送</el-button>
        </el-tooltip>

      </div>
    </el-dialog>
  </div>



</template>


<script>
import Crontab from '@/components/Crontab'
import { parseTime } from "@/utils/ruoyi";
import { getwaylist, getwatUploadList, snedJdqControls, sendsetShowGWfilterDigAjax } from "@/api/alm/getway-manager/getway-manager/getway";
import { getAreaList, getAreaInfo } from "@/api/alm/statistical-export/area-manage/area-manage";
export default {
  components: {},
  props: [],
  data() {
    return {
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        devid: undefined,
        onlineStatus: '',
        areaId: '',
      },
      showGwUpload: {
        pageNum: 1,
        pageSize: 10,
        gwMac: ''
      },
      showGwUploaControldParams: {
        gwMac: '',
        devMac: '',
        controld: '',
        lineIdList: [],
      },
      settingGWFilterDigParams: {
        deviceId: '',
        nameParams: '',
        nameType: '',
        nameCutNum: '',
        nameFilterWay: 0,
        macType: '',
        macCutNum: '',
        macParams: '',
        macFilterWay: 0,

        
      },
      settingGWFilterDig: false,
      gwUptotal: 0,
      showGwUploadDataVue: false,
      areaInfoList: [],
      uploadList: [],
      total: 0,
      // 定时任务表格数据
      logList: [],
      // 遮罩层
      loading: false,
      Uploadloading: false,
      showGwUploadDig: false,
      showGwUploaControldDig: false,
      showSearch: true,
      rules: {
        devid: [
          { required: true, message: "插座mac地址不能为空", trigger: "blur" }
        ]
      },
    }
  },
  computed: {},
  watch: {},
  created() {
    this.getAreaInfoList();
    this.getList();
  },

  mounted() { },
  methods: {
    handleCommand(command, row) {
      switch (command) {
        case "settingGWFilter":
          this.setShowGWfilterDig(row);
          break;
      }
    },
    resetForm() {
      this.resetForm("queryForm");
    },
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    openUploadDig(row) {
      this.showGwUpload.gwMac = row.deviceId;
      this.showGwUploadDig = true;
      this.getGwUploadList();
    },
    setShowGWfilterDig(row) {
      this.settingGWFilterDig = true;
      this.settingGWFilterDigParams.deviceId = row.deviceId;
    },
    getGwUploadList() {
      this.Uploadloading = true;
      getwatUploadList(this.showGwUpload).then(response => {
        if (response.code == 200) {
          this.uploadList = response.rows;
          this.gwUptotal = response.total;
        }
        this.Uploadloading = false;
      });
    },
    //发送设置过滤的条件
    sendsetShowGWfilterDig() {
      sendsetShowGWfilterDigAjax(this.settingGWFilterDigParams).then(response => {
        if (response.code == 200) {
          this.$message.success("发送成功");
        } else {
          this.$message.error(response.msg);
          this.settingGWFilterDig = false;
        }
      });
    },
    sendGwUploaControldParams() {
      snedJdqControls(this.showGwUploaControldParams).then(response => {
        if (response.code == 200) {
          this.$message.success("发送成功");
        } else {
          this.$message.error(response.msg);
          this.showGwUploaControldDig = false;
        }
      });
    },
    openJdqControls(row) {
      this.showGwUploaControldParams.gwMac = row.getWayMac;
      this.showGwUploaControldParams.devMac = row.devId;
      this.showGwUploaControldDig = true
    },
    getList() {
      this.loading = true;
      getwaylist(this.queryParams).then(response => {
        if (response.code == 200) {
          this.logList = response.rows;
          this.total = response.total;
        }
        this.loading = false;
      });
    },
    parseTime(row) {
      return parseTime(row.updateTime);
    },
    parseTime1(params) {
      return parseTime(params.actTime);
    },
    parseMM(seconds) {
      var time = seconds.existTime / 1000;
      // 计算分钟、小时和天数
      const minutes = Math.floor(time / 60);
      const hours = Math.floor(time / (60 * 60));
      const days = Math.floor(time / (24 * 60 * 60));
      // 根据不同的时间范围返回不同的格式
      if (days > 0) {
        return `${days} 天`;
      } else if (hours > 0) {
        return `${hours} 小时`;
      } else if (minutes > 0) {
        return `${minutes} 分钟`;
      } else {
        return `${time} 秒`;
      }
    },
    parseType(params) {
      switch (params.logType) {
        case 1:
          return "登录";
        case 2:
          return "离线";
        case 3:
          return "异常";
        case 4:
          return "重新插拔&登录";
      }
    },
    getAreaInfoList() {
      getAreaList({}).then(response => {
        this.areaInfoList = response.data;
      })
    },
  }
}

</script>
<style></style>
